<template>
    <div class="reviews">
      <h2 class="reviews__title">{{ title }}</h2>
      <ul class="reviews__list">
        <li v-for="review in reviews" :key="review.commentId" class="reviews__item">
          <div class="reviews__user">{{ review.loginName[0] }}*****{{ review.loginName.slice(-1) }}</div> 
          <div class="reviews__details">
            <div class="reviews__detail">
               <span class="reviews__label" >
                <el-rate
                    v-model="review.star"
                    disabled
                    show-score
                    text-color="#ff9900"
                    disabled-void-color="#ffffff"
                    >
                </el-rate>
              </span>
            </div>
            <div class="reviews__detail">
                <span class="reviews__label">购买数量：</span>
               <span class="reviews__value">{{ review.goodsCount }}</span>
               <span class="reviews__label">评价时间：</span>
               <span class="reviews__value">{{ review.formTime }}</span>
            </div>
            <div class="reviews__detail">
                <p class="reviews__comment">{{ review.content }}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </template>
  
  
  <script>
  export default {
    props: ['reviews'],
    data(){
        return{
            
        }
    },
    mounted() {
    },

  };
  </script>
  
  <style>
    .reviews {
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
    }
    
    .reviews__title {
      margin-top: 0;
      font-size: 18px;
    }
    
    .reviews__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .reviews__item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
    }
    
    .reviews__user {
      width: 10%;
      font-weight: bold;
      font-size: 16px;
    }
    
    .reviews__details {
      width: 90%;
    }
    
    .reviews__detail {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
    }
    
    .reviews__label {
      font-weight: bold;
    }
    
    .reviews__value {
      margin-left: 5px;
      margin-right: 20px;
    }
    
    .reviews__content {
      margin-top: 10px;
    }
    
    .reviews__comment {
      margin: 0;
      text-align: left;
    }

    p{
        font-size: 14px;
    }
    </style>